<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/echart/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script src="../../static/js/tool.js"></script>
    <style type="text/css">
        /* @media screen and (min-width: 1080px) { */
        body {
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            margin: 0 auto;
            padding: 0 auto;
            background-color: transparent;
        }

        body #pic1 .active,
        body #pic2 .active,
        body #pic3 .active,
        body #pic4 .active {
            display: block;
        }

        .header .el-form-item__content {
            /* padding-top: 0.4vh; */
            line-height: 0px
        }

        body .none {
            display: none;
        }

        body .header {
            width: 96vw;
            height: 50px;
            border: 1px solid transparent;
            margin-top: 1%;
            margin-left: 2%;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .header div {
            margin-top: 0.2vh;
            margin-left: 1vw;
        }

        body .header .el-form-item__label {
            /* padding-top: 0.4vh; */
        }

        body .header .el-input__inner,
        .el-form-item__label {
            font-size: medium;
            color: #000;
            border: none;
            background-color: transparent
        }

        body .header div p {
            font-size: 1em;
            /* color: #575757; */
        }

        body .middle {
            width: 97vw;
            height: 51vh;
            margin-top: 2vh;
            margin-left: 2vw;
            /* border: 1px solid; */
        }

        body .middle .echart1,
        body .middle .message {
            display: inline-block;
        }

        body .middle .echart1 {
            overflow: hidden;
            width: 68vw;
            height: 100%;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .middle .message {
            letter-spacing: 1px;
            width: calc(26.7vw - 2px);
            height: 100%;
            margin-left: 1vw;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .middle .message .hide {
            display: none;
        }

        body .middle .message li {
            margin-top: 3px;
            list-style-type: none;
        }

        body .middle .message .layui-card {
            height: inherit;
            margin-bottom: 0px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        body .middle .message .layui-card .layui-card-header {
            margin-left: 10px;
            height: 32px;
            line-height: 31px;
        }

        body .middle .message .layui-card .layui-card-header .layui-card-header-left {
            font-size: 14px;
            color: #000;
            float: left;
            border-bottom: 3px solid;
            padding: 0px 3px;
            font-weight: bold;
        }

        body .middle .message .layui-card .layui-card-header .layui-card-header-right {
            float: right;
            font-size: 10px;
            padding: 0px 5px;
            color: #000;
        }

        body .middle .message .layui-card .layui-card-body {
            margin-left: 10px;
        }

        body .middle .message .layui-card .layui-card-body-li-finish {
            text-align: center;
            line-height: 100px;
            color: #000;
            font-size: 18px;
        }

        body .middle .message .layui-card .layui-card-body-li-none {
            color: #000;
            font-weight: 600;
            font-size: small;
        }

        body .middle .message .layui-card .layui-card-body-li-left {
            margin-left: 2px;
            color: #000;
            font-size: 10px;
            display: inline-block;
            max-width: 80%;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
        }

        body .middle .message .layui-card .layui-card-body-li-right {
            font-size: 12px;
            color: #03a9f4;
            text-decoration: none;
            float: right;
            width: 70px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        body .footer {
            width: 97vw;
            height: calc(34vh - 20px);
            margin-top: 2vh;
            margin-left: 2vw;
        }

        body .footer .echart2,
        body .footer .echart3,
        body .footer .echart4 {
            overflow: hidden;
            display: inline-block;
        }

        body .footer .echart2 {
            width: calc(36vw - 6px);
            height: 100%;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .footer .echart3 {
            width: 31vw;
            height: 100%;
            margin-left: 1vw;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .footer .echart4 {
            width: calc(26.7vw - 2px);
            height: 100%;
            margin-left: 1vw;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header" style="display: flex;align-items: center;">
            <el-row>
                <el-col>
                    <div>
                        <span>筛选：</span>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-left: 0px;">
                <el-col>
                    <el-select v-model="selectDataLabel" placeholder="请选择" @change="changePre" style="width: 100px;">
                        <el-option v-for="item in selectData" :key="item.value" :value="item.value" :label="item.label"
                            v-cloak>
                            {{item.label}}
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
        </div>
        <div class="middle">
            <div class="echart1" id="pic1"></div>
            <div class="message">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-card-header-left">我的代办</div>
                        <span id="unRead"></span>
                        <div class="layui-card-header-right hide" style="cursor: pointer;">更多</div>
                    </div>
                    <div class="layui-card-body">
                        <ul id="todoList">
                            <li class="layui-card-body-li-finish">无待办事项</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="echart2" id="pic2"></div>
            <div class="echart3" id="pic3"></div>
            <div class="echart4" id="pic4"></div>
        </div>
    </div>

</body>

<script type="text/javascript">
    let vue = null;
    let mybar1;
    let barChart;
    let pieChart1;
    let pieChart2;
    window.onload = function () {
        let main = {
            data() {
                return {
                    selectData: [],
                    selectDataLabel: "四川"
                }
            },
            created() {},
            mounted() {
                this.getEchart1()
            },
            watch: {
                formData: {
                    deep: true,
                    handler: function (newVal, oldVal) {
                        this.isChanged += 1;
                    }
                }
            },
            methods: {
                //切换地区
                changePre() {
                    if (this.selectDataLabel == "四川") {
                        this.getEchart2("四川");
                        this.getEchart3("全省");
                        this.getEchart4("四川");
                    } else {
                        this.getEchart2(this.selectDataLabel);
                        this.getEchart3(this.selectDataLabel);
                        this.getEchart4(this.selectDataLabel);
                    }
                },
                //
                getEchart1() {
                    //echart1
                    let loading = this.$loading({
                        lock: true,
                        target: '.echart1',
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                        fullscreen: false
                    })
                    let loadingText = this.$loading({
                        lock: true,
                        target: '.message',
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                        fullscreen: false
                    })
                    let that = this
                    mybar1 = echarts.init(document.getElementById('pic1'));
                    let data = []
                    data = [{
                        "ORG_NAME": "四川",
                        "0分站址数": "5462",
                        "0_60分站址数": "1268",
                        "60_70分站址数": "3984",
                        "70_80分站址数": "14941",
                        "80_90分站址数": "20884",
                        "90分以上站址数": "52279"
                    }, {
                        "ORG_NAME": "成都",
                        "0分站址数": "2554",
                        "0_60分站址数": "400",
                        "60_70分站址数": "1615",
                        "70_80分站址数": "3957",
                        "80_90分站址数": "7517",
                        "90分以上站址数": "5592"
                    }, {
                        "ORG_NAME": "凉山",
                        "0分站址数": "453",
                        "0_60分站址数": "146",
                        "60_70分站址数": "380",
                        "70_80分站址数": "1051",
                        "80_90分站址数": "1921",
                        "90分以上站址数": "2828"
                    }, {
                        "ORG_NAME": "绵阳",
                        "0分站址数": "199",
                        "0_60分站址数": "178",
                        "60_70分站址数": "304",
                        "70_80分站址数": "1026",
                        "80_90分站址数": "1020",
                        "90分以上站址数": "3643"
                    }, {
                        "ORG_NAME": "南充",
                        "0分站址数": "73",
                        "0_60分站址数": "59",
                        "60_70分站址数": "146",
                        "70_80分站址数": "600",
                        "80_90分站址数": "1095",
                        "90分以上站址数": "3788"
                    }, {
                        "ORG_NAME": "宜宾",
                        "0分站址数": "165",
                        "0_60分站址数": "50",
                        "60_70分站址数": "188",
                        "70_80分站址数": "840",
                        "80_90分站址数": "882",
                        "90分以上站址数": "3059"
                    }, {
                        "ORG_NAME": "达州",
                        "0分站址数": "171",
                        "0_60分站址数": "19",
                        "60_70分站址数": "79",
                        "70_80分站址数": "620",
                        "80_90分站址数": "708",
                        "90分以上站址数": "3497"
                    }, {
                        "ORG_NAME": "乐山",
                        "0分站址数": "11",
                        "0_60分站址数": "37",
                        "60_70分站址数": "115",
                        "70_80分站址数": "768",
                        "80_90分站址数": "840",
                        "90分以上站址数": "3011"
                    }, {
                        "ORG_NAME": "巴中",
                        "0分站址数": "148",
                        "0_60分站址数": "20",
                        "60_70分站址数": "121",
                        "70_80分站址数": "580",
                        "80_90分站址数": "845",
                        "90分以上站址数": "2390"
                    }, {
                        "ORG_NAME": "甘孜",
                        "0分站址数": "643",
                        "0_60分站址数": "97",
                        "60_70分站址数": "186",
                        "70_80分站址数": "707",
                        "80_90分站址数": "740",
                        "90分以上站址数": "1720"
                    }, {
                        "ORG_NAME": "泸州",
                        "0分站址数": "158",
                        "0_60分站址数": "13",
                        "60_70分站址数": "66",
                        "70_80分站址数": "464",
                        "80_90分站址数": "589",
                        "90分以上站址数": "2705"
                    }, {
                        "ORG_NAME": "广元",
                        "0分站址数": "55",
                        "0_60分站址数": "20",
                        "60_70分站址数": "112",
                        "70_80分站址数": "525",
                        "80_90分站址数": "743",
                        "90分以上站址数": "2102"
                    }, {
                        "ORG_NAME": "广安",
                        "0分站址数": "124",
                        "0_60分站址数": "8",
                        "60_70分站址数": "30",
                        "70_80分站址数": "407",
                        "80_90分站址数": "441",
                        "90分以上站址数": "2349"
                    }, {
                        "ORG_NAME": "德阳",
                        "0分站址数": "16",
                        "0_60分站址数": "29",
                        "60_70分站址数": "70",
                        "70_80分站址数": "491",
                        "80_90分站址数": "464",
                        "90分以上站址数": "2248"
                    }, {
                        "ORG_NAME": "遂宁",
                        "0分站址数": "30",
                        "0_60分站址数": "9",
                        "60_70分站址数": "27",
                        "70_80分站址数": "248",
                        "80_90分站址数": "365",
                        "90分以上站址数": "2330"
                    }, {
                        "ORG_NAME": "阿坝",
                        "0分站址数": "357",
                        "0_60分站址数": "68",
                        "60_70分站址数": "215",
                        "70_80分站址数": "513",
                        "80_90分站址数": "568",
                        "90分以上站址数": "1092"
                    }, {
                        "ORG_NAME": "雅安",
                        "0分站址数": "120",
                        "0_60分站址数": "38",
                        "60_70分站址数": "107",
                        "70_80分站址数": "500",
                        "80_90分站址数": "486",
                        "90分以上站址数": "1545"
                    }, {
                        "ORG_NAME": "资阳",
                        "0分站址数": "42",
                        "0_60分站址数": "14",
                        "60_70分站址数": "39",
                        "70_80分站址数": "349",
                        "80_90分站址数": "331",
                        "90分以上站址数": "1969"
                    }, {
                        "ORG_NAME": "内江",
                        "0分站址数": "25",
                        "0_60分站址数": "28",
                        "60_70分站址数": "71",
                        "70_80分站址数": "453",
                        "80_90分站址数": "448",
                        "90分以上站址数": "1684"
                    }, {
                        "ORG_NAME": "自贡",
                        "0分站址数": "24",
                        "0_60分站址数": "14",
                        "60_70分站址数": "54",
                        "70_80分站址数": "395",
                        "80_90分站址数": "366",
                        "90分以上站址数": "1567"
                    }, {
                        "ORG_NAME": "眉山",
                        "0分站址数": "43",
                        "0_60分站址数": "20",
                        "60_70分站址数": "53",
                        "70_80分站址数": "379",
                        "80_90分站址数": "325",
                        "90分以上站址数": "1419"
                    }, {
                        "ORG_NAME": "攀枝花",
                        "0分站址数": "51",
                        "0_60分站址数": "1",
                        "60_70分站址数": "6",
                        "70_80分站址数": "68",
                        "80_90分站址数": "190",
                        "90分以上站址数": "1741"
                    }]
                    let option = []
                    if (data.length != 0) {
                        let local = [];
                        let zero = [];
                        let six = [];
                        let seven = [];
                        let eight = [];
                        let nine = [];
                        let full = [];
                        // let name = [];
                        let labels = []
                        for (let i = 0; i < data.length; i++) {
                            //获取数据属性名
                            labels = ['0分站址数', '0_60分站址数', '60_70分站址数', '70_80分站址数', '80_90分站址数',
                                '90分以上站址数'
                            ];
                            if (i != 0) {
                                local.push(data[i]['ORG_NAME']);
                                zero.push(parseInt(data[i]['0分站址数']));
                                six.push(parseInt(data[i]['0_60分站址数']));
                                seven.push(parseInt(data[i]['60_70分站址数']));
                                eight.push(parseInt(data[i]['70_80分站址数']));
                                nine.push(parseInt(data[i]['80_90分站址数']));
                                full.push(parseInt(data[i]['90分以上站址数']));
                            }
                            //添加select的值
                            //添加option
                            if (i + 1 == 1) {
                                that.selectData.push({
                                    label: '四川',
                                    value: '四川'
                                })
                            } else {
                                that.selectData.push({
                                    label: data[i]['ORG_NAME'],
                                    value: data[i]['ORG_NAME']
                                })
                            }
                        }
                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                show: true,
                                text: " 站址健康度分数情况及统计结果",
                                x: 'left',
                                top: 3,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                }
                            },
                            color: ['#ff5722', '#FFD573', '#37A2DA', '#31C5E9',
                                '#68DFE3', '#9FE7B9'
                            ],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                                formatter: function (params) { //这里就是控制显示的样式
                                    let relVal = params[0].name;
                                    let value = 0;
                                    for (let i = 0, l = params.length; i < l; i++) {
                                        value += params[i].value;
                                    }
                                    for (let i = 0, l = params.length; i < l; i++) {
                                        //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
                                        relVal += '<br/>' + params[i].marker +
                                            params[i].seriesName +
                                            '  : 数量 : ' + parseFloat(params[i]
                                                .value) + ', 百分比 : ' + (
                                                100 *
                                                parseFloat(params[i].value) /
                                                parseFloat(value))
                                            .toFixed(
                                                2) + "%";
                                    }
                                    return relVal;
                                },
                            },
                            legend: {
                                data: labels,
                                icon: 'circle',
                                x: 'left',
                                y: 'top',
                                top: '7%',
                                textStyle: {
                                    color: '#000'
                                },
                            },
                            grid: {
                                left: '1%',
                                right: '2%',
                                bottom: '2%',
                                containLabel: true,
                            },
                            xAxis: {
                                type: 'category',
                                data: local,
                                axisLabel: {
                                    interval: 0,
                                    rotate: -40,
                                    color: '#000'
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#000',
                                        fontSize: '10px',
                                    }
                                }
                            },
                            series: [{
                                    name: labels[0],
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: zero
                                },
                                {
                                    name: labels[1],
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: six
                                },
                                {
                                    name: labels[2],
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: seven,
                                },
                                {
                                    name: labels[3],
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: eight,
                                },
                                {
                                    name: labels[4],
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: nine,
                                },
                                {
                                    name: labels[5],
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: full,
                                    itemStyle: {
                                        emphasis: {
                                            barBorderRadius: [3, 3, 0, 0]
                                        },
                                        normal: {
                                            barBorderRadius: [3, 3, 0, 0]
                                        }
                                    }
                                }
                            ]
                        };
                    } else {
                        option = {
                            title: {
                                show: true,
                                text: " 站址健康度分数情况及统计结果--无数据",
                                x: 'left',
                                top: 3,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                }
                            },
                            color: ['#ff5722', '#FFD573', '#37A2DA', '#31C5E9',
                                '#68DFE3', '#9FE7B9'
                            ],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                            },
                            legend: {
                                data: [1, 1, 1, 1, 1, 1, ],
                                icon: 'circle',
                                x: 'left',
                                y: 'top',
                                top: '8%',
                                textStyle: {
                                    color: '#000'
                                },
                            },
                            grid: {
                                left: '1%',
                                right: '2%',
                                bottom: '1%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: [1, 1, 1, 1, 1, 1, ],
                                axisLabel: {
                                    interval: 0,
                                    rotate: -40,
                                    color: '#000'
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#000',
                                        fontSize: '10px',
                                    }
                                }
                            },
                            series: [{
                                    name: '0',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: [1, 1, 1, 1, 1, 1, ]
                                },
                                {
                                    name: '60',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: [1, 1, 1, 1, 1, 1, ],
                                },
                                {
                                    name: '70',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: [1, 1, 1, 1, 1, 1, ],
                                },
                                {
                                    name: '80',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: [1, 1, 1, 1, 1, 1, ],
                                },
                                {
                                    name: '90',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: [1, 1, 1, 1, 1, 1, ],
                                },
                                {
                                    name: '100',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: false,
                                    },
                                    data: [1, 1, 1, 1, 1, 1, ],
                                    itemStyle: {
                                        emphasis: {
                                            barBorderRadius: [3, 3, 0, 0]
                                        },
                                        normal: {
                                            barBorderRadius: [3, 3, 0, 0]
                                        }
                                    }
                                }
                            ]
                        }
                    }
                    // 使用刚指定的配置项和数据显示图表。
                    mybar1.setOption(option);
                    loading.close()
                    // }, function () {})
                    let res = [{
                        "MENU_ID": "3306",
                        "TYPE": "[电子化对账]",
                        "ID": "0",
                        "TEXT": "未推送电信数据条数:1495",
                        "CREATE_TIME": "2021-11-16",
                        "FLAG": "1495",
                        "MENU_NAME": "推送电信能耗系统电费台账",
                        "MENU_PATH": "../WuYeManage/DFTZ_DX.aspx?id=0"
                    }, {
                        "MENU_ID": "3306",
                        "TYPE": "[电子化对账]",
                        "ID": "0",
                        "TEXT": "未推送省公司数据条数:1866",
                        "CREATE_TIME": "2021-11-16",
                        "FLAG": "1866",
                        "MENU_NAME": "推送电信能耗系统电费台账",
                        "MENU_PATH": "../WuYeManage/DFTZ_DX.aspx?id=0"
                    }, {
                        "MENU_ID": "3122",
                        "TYPE": "[整改通知书未回复]",
                        "ID": "0",
                        "TEXT": "未处理数据条数:91",
                        "CREATE_TIME": "2021-11-16",
                        "FLAG": "91",
                        "MENU_NAME": "整治回头看反馈",
                        "MENU_PATH": "../ProjectManagNew/WYYSZZTZQKFK.aspx?id=0"
                    }, {
                        "MENU_ID": "3122",
                        "TYPE": "[整治回头看反馈]",
                        "ID": "0",
                        "TEXT": "未处理数据条数:4176",
                        "CREATE_TIME": "2021-11-16",
                        "FLAG": "4176",
                        "MENU_NAME": "整治回头看反馈",
                        "MENU_PATH": "../ProjectManagNew/WYYSZZTZQKFK.aspx?id=0"
                    }]
                    let todoHtml = "";
                    if (res) {
                        for (let i = 0; i < res.length; i++) {
                            todoHtml += "<li>" + "<div>" + "    <div class=\" layui-card-body-li-none\">" + res[
                                    i]
                                .TYPE + res[i].TEXT +
                                "</div>" +
                                " <div class=\"layui-card-body-li-left\">" + res[i]
                                .CREATE_TIME + "</div>" +
                                "<a class=\"layui-card-body-li-right\" href=\"javascript:window.top.f_addTab(" +
                                res[i].MENU_ID + ",'" +
                                res[i].MENU_NAME + "','" + res[i].MENU_PATH + "&menuid=" + res[i].MENU_ID +
                                "&typeName=" +
                                encodeURIComponent(res[i].TEXT) + "');\" title=\"" + res[i].TEXT + "\">" +
                                "详情>" +
                                "</a>" +
                                "</div>"
                            "</li>";
                        }
                        $("#unRead").append(res.length);
                        $("#unRead").css({
                            "color": "white",
                            "float": "left",
                            "font-size": "12px",
                            "display": "block",
                            "text-align": "center",
                            "line-height": "100%",
                            "background": "#f44336",
                            "margin-left": "3px",
                            "width": "12px",
                            "height": "12px",
                            "border": "solid #f44336",
                            "border-radius": "50%"
                        })
                        $("#todoList").html(todoHtml);
                    }
                    // }
                    loadingText.close()
                    this.getEchart2("四川");
                    this.getEchart3("全省");
                    this.getEchart4("四川");
                },
                //echarts2
                getEchart2(V_CITY) {
                    const loading2 = this.$loading({
                        lock: true,
                        target: '.echart2',
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                        fullscreen: false
                    })
                    let params = {
                        V_CITY: V_CITY
                    }
                    let data = []
                    if (data.length != 0) {
                        for (var i = 0; i < data.length; i++) {
                            //获取数据属性名
                            let labels = [];
                            for (key in data[i]) {
                                labels.push(key);
                            }
                            var dataResult = [];
                            var name = [];
                            for (j = 1; j < labels.length; j++) {
                                var a = {};
                                name.push(labels[j]);
                                dataResult.push(parseInt(data[i][labels[j]]));
                            }
                            barChart = echarts.init(document.getElementById('pic2'));
                            var option2 = [];
                            option2[i] = {
                                title: {
                                    show: true,
                                    text: " 疑似私装反馈情况统计",
                                    x: 'left',
                                    top: 3,
                                    textStyle: {
                                        color: '#000',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                    }
                                },
                                color: ['#76ADFF', '#71DFD2', '#FFD573', '#FF7676',
                                    '#A190F6'
                                ],
                                xAxis: {
                                    type: 'category',
                                    data: name,
                                    axisLabel: {
                                        interval: 0,
                                        rotate: -30,
                                        color: '#000'
                                    },
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: '#000',
                                        }
                                    }
                                },
                                series: [{
                                    label: {
                                        show: true,
                                        color: '#000',
                                        fontWeight: 'blod',
                                    },
                                    data: [{
                                            value: dataResult[0],
                                            itemStyle: {
                                                emphasis: {
                                                    color: '#76ADFF',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                },
                                                normal: {
                                                    color: '#76ADFF',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                }
                                            }
                                        }, {
                                            value: dataResult[1],
                                            itemStyle: {
                                                emphasis: {
                                                    color: '#71DFD2',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                },
                                                normal: {
                                                    color: '#71DFD2',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                }
                                            }
                                        },
                                        {
                                            value: dataResult[2],
                                            itemStyle: {
                                                emphasis: {
                                                    color: '#FFD573',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                },
                                                normal: {
                                                    color: '#FFD573',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                }
                                            }
                                        }, {
                                            value: dataResult[3],
                                            itemStyle: {
                                                emphasis: {
                                                    color: '#FF7676',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                },
                                                normal: {
                                                    color: '#FF7676',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                }
                                            }
                                        },
                                        {
                                            value: dataResult[4],
                                            itemStyle: {
                                                emphasis: {
                                                    color: '#A190F6',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                },
                                                normal: {
                                                    color: '#A190F6',
                                                    barBorderRadius: [7, 7,
                                                        0, 0
                                                    ]
                                                }
                                            }
                                        }
                                    ],
                                    type: 'bar'
                                }]
                            };
                            if (option2[i] && typeof option2[i] === 'object') {
                                barChart.setOption(option2[i]);
                            }
                        }
                        loading2.close()
                    } else {
                        barChart = echarts.init(document.getElementById('pic2'));
                        var app = {};
                        var option = [];
                        option = {
                            title: {
                                show: true,
                                text: " 疑似私装反馈情况统计--无数据",
                                x: 'left',
                                top: 3,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                }
                            },
                            color: ['#76ADFF', '#71DFD2', '#FFD573', '#FF7676',
                                '#A190F6'
                            ],
                            xAxis: {
                                type: 'category',
                                data: name,
                                axisLabel: {
                                    fontSize: 10,
                                    interval: 0,
                                    rotate: -40,
                                    color: '#000'
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#000',
                                    }
                                }
                            },
                            series: [{
                                label: {
                                    show: true,
                                    color: 'black',
                                    fontWeight: 'blod'
                                },
                                data: [{
                                        value: 100,
                                        itemStyle: {
                                            emphasis: {
                                                color: '#76ADFF',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            },
                                            normal: {
                                                color: '#76ADFF',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            }
                                        }
                                    }, {
                                        value: 100,
                                        itemStyle: {
                                            emphasis: {
                                                color: '#71DFD2',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            },
                                            normal: {
                                                color: '#71DFD2',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            }
                                        }
                                    },
                                    {
                                        value: 100,
                                        itemStyle: {
                                            emphasis: {
                                                color: '#FFD573',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            },
                                            normal: {
                                                color: '#FFD573',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            }
                                        }
                                    }, {
                                        value: 100,
                                        itemStyle: {
                                            emphasis: {
                                                color: '#FF7676',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            },
                                            normal: {
                                                color: '#FF7676',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            }
                                        }
                                    },
                                    {
                                        value: 100,
                                        itemStyle: {
                                            emphasis: {
                                                color: '#A190F6',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            },
                                            normal: {
                                                color: '#A190F6',
                                                barBorderRadius: [7, 7, 0,
                                                    0
                                                ]
                                            }
                                        }
                                    }
                                ],
                                type: 'bar'
                            }]
                        };
                        if (option && typeof option === 'object') {
                            barChart.setOption(option);
                            // $(".echart2").hideLoading();
                        }
                        // $(".echart2").hideLoading();
                        loading2.close()
                    }
                    // }, function () {
                    //     loading2.close()
                    // })
                },
                //echart3
                getEchart3(V_CITY) {
                    const loading3 = this.$loading({
                        lock: true,
                        // spinner: 'el-icon-loading',
                        target: '.echart3',
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                        fullscreen: false
                    })
                    let params = {
                        V_CITY: V_CITY
                    }
                    let data = []
                    if (data.length != 0) {
                        for (var i = 0; i < data.length; i++) {
                            //获取数据属性名
                            var labels = [];
                            for (key in data[i]) {
                                labels.push(key);
                            }
                            var result = [];
                            for (j = 1; j < labels.length; j++) {
                                var a = {};
                                a.name = labels[j];
                                a.value = parseInt(data[i][labels[j]]);
                                result.push(a);
                            }
                            //使用echarts绘制
                            pieChart1 = echarts.init(document.getElementById('pic3'));
                            var app = {};
                            var option3 = [];
                            option3[i] = {
                                color: ['#76ADFF', '#FFD573', '#FF7676'],
                                title: {
                                    show: true,
                                    text: " 开关电源整流模块配置情况统计",
                                    x: 'left',
                                    top: 3,
                                    textStyle: {
                                        color: '#000',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                    }
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    icon: 'circle',
                                    x: 'center',
                                    y: 'bottom',
                                    textStyle: {
                                        color: '#000',
                                    }
                                },
                                series: [{
                                    name: '开关电源整流',
                                    type: 'pie',
                                    radius: ['20%', '40%'],
                                    // center: ['50%', '50%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    labelLine: {
                                        show: true
                                    },
                                    data: result,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        },
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'outer',
                                                formatter: '{c} ({d}%)',
                                                color: '#000'
                                            },
                                        }
                                    }
                                }]
                            };
                            if (option3[i] && typeof option3[i] === 'object') {
                                pieChart1.setOption(option3[i]);
                                // $(".echart3").hideLoading();
                            }
                        }
                        // $(".echart3").hideLoading();
                        loading3.close()
                    } else {
                        var pieChart = echarts.init(document.getElementById('pic3'));
                        var app = {};
                        var option = [];
                        option = {
                            color: ['#76ADFF', '#FFD573', '#FF7676'],
                            title: {
                                show: true,
                                text: " 开关电源整流模块配置情况统计--无数据",
                                x: 'left',
                                top: 3,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                }
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                icon: 'circle',
                                x: 'center',
                                y: 'bottom',
                                textStyle: {
                                    color: '#000',
                                }
                            },
                            series: [{
                                name: '访问来源',
                                name: '开关电源整流',
                                type: 'pie',
                                radius: ['30%', '70%'],
                                center: ['50%', '50%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#000',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [{
                                        value: 0,
                                        name: '超配'
                                    },
                                    {
                                        value: 0,
                                        name: '欠配'
                                    },
                                    {
                                        value: 0,
                                        name: '适配'
                                    }
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: {
                                        label: {
                                            show: true,
                                            position: 'inner',
                                            formatter: '{c} ({d}%)',
                                            color: 'black'
                                        },
                                    }
                                }
                            }]
                        };
                        if (option && typeof option === 'object') {
                            pieChart.setOption(option);
                            // $(".echart3").hideLoading();
                        }
                        // $(".echart3").hideLoading();
                        loading3.close()
                    }
                    // }, function () {
                    //     loading3.close()
                    // }, false)
                },
                //echart4
                getEchart4(V_CITY) {
                    let loading4 = this.$loading({
                        lock: true,
                        // spinner: 'el-icon-loading',
                        target: '.echart4',
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                        fullscreen: false
                    })
                    let params = {
                        V_CITY: V_CITY
                    }
                    let data = []
                    // webApiMsapi('/Todo/kgdyList', 'post', params, function (res) {
                    //     if (res.code == 200) {
                    //         data = res.data
                    //     } else {
                    //         data = []
                    //     }
                    if (data.length != 0) {
                        for (var i = 0; i < data.length; i++) {
                            //获取数据属性名
                            var labels = [];
                            for (key in data[i]) {
                                labels.push(key);
                            }
                            //重新整合数据，变为echarts适合的格式
                            var result = [];
                            for (j = 1; j < labels.length; j++) {
                                var a = {};
                                a.name = labels[j];
                                a.value = parseInt(data[i][labels[j]]);
                                result.push(a);
                            }
                            //使用echarts绘制
                            pieChart2 = echarts.init(document.getElementById('pic4'));
                            var app = {};
                            var option4 = [];
                            option4[i] = {
                                color: ['#31C5E9', '#66E0E3', '#9FE7B9', '#FFD573'],
                                title: {
                                    show: true,
                                    text: " 开关电源参数校验统计",
                                    x: 'left',
                                    top: 3,
                                    textStyle: {
                                        color: '#000',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                    }
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    icon: 'circle',
                                    x: 'center',
                                    y: 'bottom',
                                    textStyle: {
                                        color: '#000',
                                    }
                                },
                                series: [{
                                    name: '开关电源整流',
                                    type: 'pie',
                                    radius: ['20%', '40%'],
                                    // center: ['40%', '40%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    labelLine: {
                                        show: true,
                                        length: 2,
                                        length2: 20,
                                    },
                                    data: result,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 20,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        },
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'outer',
                                                formatter: '{c} ({d}%)',
                                                color: '#000'
                                            },
                                        }
                                    }
                                }]
                            };
                            if (option4[i] && typeof option4[i] === 'object') {
                                pieChart2.setOption(option4[i]);
                                // $(".echart4").hideLoading();
                            }
                            // pieChart2.on('click', function () {
                            //     window.location.href = "../reports/TreeReport.aspx";
                            // });
                        }
                        // $(".echart4").hideLoading();
                        loading4.close()
                    } else {
                        pieChart2 = echarts.init(document.getElementById('pic4'));
                        var app = {};
                        var option = [];
                        option = {
                            color: ['#31C5E9', '#66E0E3', '#9FE7B9', '#FFD573'],
                            title: {
                                show: true,
                                text: " 开关电源参数校验统计--无数据",
                                x: 'left',
                                top: 3,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                }
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                icon: 'circle',
                                x: 'center',
                                y: 'bottom',
                                textStyle: {
                                    color: '#000',
                                }
                            },
                            series: [{
                                name: '访问来源',
                                name: '开关电源整流',
                                type: 'pie',
                                radius: ['20%', '40%'],
                                // center: ['50%', '50%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#000',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [{
                                        value: 0,
                                        name: '一次下电设定值错误'
                                    },
                                    {
                                        value: 0,
                                        name: '二次下电设定值错误'
                                    },
                                    {
                                        value: 0,
                                        name: '浮充电压设定值错误'
                                    },
                                    {
                                        value: 0,
                                        name: '均充电压设定值错误'
                                    }
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: {
                                        label: {
                                            show: true,
                                            position: 'inner',
                                            formatter: '{c} ({d}%)',
                                            color: 'black'
                                        },
                                    }
                                }
                            }]
                        };
                        if (option && typeof option === 'object') {
                            pieChart2.setOption(option);
                        }
                        loading4.close()
                    }
                    // }, function () {
                    //     loading4.close()
                    // }, false)
                }
            }
        };

        vue = Vue.extend(main);
        vue = new vue().$mount('#app');
        $(window).resize(function () {
            setTimeout("resizeWindow()", 1000);
        });
    }

    function resizeWindow() {
        mybar1.resize();
        barChart.resize();
        pieChart1.resize();
        pieChart2.resize();
    }

    function goToMenu(id, name, path) {
        let realPath = path + '?menu_id=' + id
        Tool.openTabEvents(realPath, name, {}, '../sys/sys-index.html')
    }
</script>

</html>